import * as React from 'react';
import {View, Text, TouchableOpacity, Button, Image, SafeAreaView} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import HomeIndex from './app/home/homeIndex';//首页
import SelectPic from './app/frame/selectPic';//选择浏览图片
import SetPicWidth from './app/frame/setPicWidth';//设置图片宽度
import MaterialBank from './app/frame/materialBank';//素材库
import SelectMaterial from './app/frame/selectMaterial';//选择画芯
import SelectFrame from './app/frame/selectFrame';//选择画框
import MatchFrame from './app/frame/matchFrame';//配框
import Scene from './app/frame/scene';//情景预览
import Commodities from './app/frame/commodities';//清单
import UserIndex from './app/userCenter/userIndex';//我的
import Login from './app/userCenter/login';//登录
import AppSetting from './app/userCenter/appSetting';//设置
import UserHistory from './app/userCenter/userHistory';//我的足迹
import AddressAdmin from './app/address/addressAdmin';//我的地址
import AddAddress from './app/address/addModifyAddress';//添加/修改地址
import UserCollection from './app/userCenter/userCollection';//我的收藏
import UserGroup from './app/userCenter/userGroup/myGroup';//我的拼团
import UserCoupon from './app/userCenter/userCoupon/myCoupon';//我的优惠券
import UserWallet from './app/userCenter/userWallet/myWallet';//我的钱包
import OrderList from './app/order/orderList';//订单列表
import OrderInfo from './app/order/orderInfo';//订单详情
import GoodsIndex from './app/goods/goodsIndex';//商品详情
import PhotoBrowser from './app/goods/photoBrowser';//图片预览
import ReceiveCenter from './app/marketing/coupon/receiveCenter' ;//领券中心
import GoodsList from './app/goods/goodsList';//商品列表
import News from './app/news/newsList';//文章列表
import NewsDetail from './app/news/newsDetail';//文章详情
import ShoppingCart from './app/shoppingCart/loginCart';//购物车
import ConfirmOrder from './app/order/confirmOrder';//确认订单
import SelectLogistics from './app/order/selectLogistics';//选择物流
import GroupGoodsIndex from './app/goods/groupGoodsIndex';//拼团商品详情
import AboutUs from './app/userCenter/aboutUs';//关于我们
import VideoList from './app/video/videoList';//视频列表

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator();

function HomeScreen({route,navigation}) {
    return <HomeIndex navigation={navigation} route={route}/>
}


function Home() {
    return (
        <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
            <Tab.Screen name="Home" component={HomeScreen}/>
            <Tab.Screen name="SelectPic" component={SelectPic}/>
            <Tab.Screen name="ShoppingCart" component={ShoppingCart}/>
            <Tab.Screen name="UserIndex" component={UserIndex}/>
        </Tab.Navigator>
    );
}


function MyTabBar({state, descriptors, navigation}) {
    return (
        <View style={{flexDirection: 'row', height: 50, alignItems: 'center', backgroundColor: "#fff",borderTopWidth:1,borderTopColor:"#e0e0e0"}}>
            {state.routes.map((route, index) => {
                const {options} = descriptors[route.key];
                const focusedOptions = descriptors[state.routes[state.index].key].options;

                if (focusedOptions.tabBarVisible === false) {
                    return null;
                }
                const isFocused = state.index === index;

                let img
                let title
                if (route.name == 'Home') {
                    img = isFocused ? require('./app/imgs/jy_02.png') : require('./app/imgs/jy_01.png')
                    title = '首页'
                } else if (route.name == 'SelectPic') {
                    img = require('./app/imgs/frame_nav.png')
                    title = '配框'
                }else if(route.name=='UserIndex'){
                    img = isFocused ? require('./app/imgs/jy_08.png') : require('./app/imgs/jy_07.png')
                    title='我的'
                }else if(route.name=='ShoppingCart'){
                    img = isFocused ? require('./app/imgs/jy_06.png') : require('./app/imgs/jy_05.png')
                    title='购物车'
                }

                const onPress = () => {
                    const event = navigation.emit({
                        type: 'tabPress',
                        target: route.key,
                    });

                    if (!isFocused && !event.defaultPrevented) {
                        navigation.navigate(route.name);
                    }
                };


                if (route.name == 'SelectPic') {
                    return (
                        <TouchableOpacity
                            key={index}
                            accessibilityRole="button"
                            accessibilityStates={isFocused ? ['selected'] : []}
                            accessibilityLabel={options.tabBarAccessibilityLabel}
                            testID={options.tabBarTestID}
                            onPress={onPress}
                            style={{flex: 1, alignItems: 'center', height: 50}}
                        >
                            <Image source={img} style={{width: 60, height: 60, marginTop: -20}} resizeMode={'cover'}/>
                        </TouchableOpacity>
                    );
                } else {
                    return (
                        <TouchableOpacity
                            key={index}
                            accessibilityRole="button"
                            accessibilityStates={isFocused ? ['selected'] : []}
                            accessibilityLabel={options.tabBarAccessibilityLabel}
                            testID={options.tabBarTestID}
                            onPress={onPress}
                            style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
                        >
                            <Image source={img} style={{width: 20, height: 20, marginBottom: 5}} resizeMode={'cover'}/>
                            <Text style={isFocused?{fontSize:10,color:"#ee1f12", fontWeight:'bold'}:{fontSize:10,color:"#666"}}>
                                {title}
                            </Text>
                        </TouchableOpacity>
                    );
                }

            })}
        </View>
    );
}


export default function App() {
    return (
        <SafeAreaView style={{flex:1}}>
            <NavigationContainer>
                <Stack.Navigator
                    screenOptions={{
                        headerShown:false
                    }}
                >
                    <Stack.Screen name="Home" component={Home}/>
                    <Stack.Screen name="MaterialBank" component={MaterialBank}/>
                    <Stack.Screen name="SetPicWidth" component={SetPicWidth}/>
                    <Stack.Screen name="SelectMaterial" component={SelectMaterial}/>
                    <Stack.Screen name="SelectFrame" component={SelectFrame}/>
                    <Stack.Screen name="MatchFrame" component={MatchFrame}/>
                    <Stack.Screen name="Scene" component={Scene}/>
                    <Stack.Screen name="Commodities" component={Commodities}/>
                    <Stack.Screen name="AppSetting" component={AppSetting}/>
                    <Stack.Screen name="UserHistory" component={UserHistory}/>
                    <Stack.Screen name="AddressAdmin" component={AddressAdmin}/>
                    <Stack.Screen name="AddAddress" component={AddAddress}/>
                    <Stack.Screen name="UserCollection" component={UserCollection}/>
                    <Stack.Screen name="UserGroup" component={UserGroup}/>
                    <Stack.Screen name="UserCoupon" component={UserCoupon}/>
                    <Stack.Screen name="UserWallet" component={UserWallet}/>
                    <Stack.Screen name="OrderList" component={OrderList}/>
                    <Stack.Screen name="OrderInfo" component={OrderInfo}/>
                    <Stack.Screen name="Login" component={Login}/>
                    <Stack.Screen name="GoodsIndex" component={GoodsIndex}/>
                    <Stack.Screen name="PhotoBrowser" component={PhotoBrowser}/>
                    <Stack.Screen name="ReceiveCenter" component={ReceiveCenter}/>
                    <Stack.Screen name="GoodsList" component={GoodsList}/>
                    <Stack.Screen name="News" component={News}/>
                    <Stack.Screen name="ConfirmOrder" component={ConfirmOrder}/>
                    <Stack.Screen name="SelectLogistics" component={SelectLogistics}/>
                    <Stack.Screen name="GroupGoodsIndex" component={GroupGoodsIndex}/>
                    <Stack.Screen name="AboutUs" component={AboutUs}/>
                    <Stack.Screen name="VideoList" component={VideoList}/>
                    <Stack.Screen name="NewsDetail" component={NewsDetail}/>
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    );
}

global.md5Key = '2dacb3307dc1a3610d2fc101649f6718'//测试服
global.standard = 1 //0是标准版,1是物联版
global.store_id = 285551

// global.md5Key="c4c5d723742f6e4a2cbc7d6f6dad63b0";//芙格

global.ISLOCAL = 0;//等于1 为本地测试,等于0为线上
global.VERSIONCODE = '20200211141700'
global.LOG = (...args) => {
    console.log('/------------------------------\\');
    console.log(...args);
    console.log('\\------------------------------/');
    return args[args.length - 1];
};